<script setup lang="ts">
import { Search, Refresh } from '@element-plus/icons-vue'
import { reactive } from "@vue/reactivity";
import { onMounted, ref } from 'vue';

onMounted(() => {
    getList()
})

// tab切换
const radioValue = ref(1)
const onTabChange = (e: any) => {
    console.log(e)
    getList()
}

// 搜索
const searchKey = ref('')
const onSearch = () => {
    getList()
}

// 列表数据
const data = reactive<any>({
    list: [],
    pageIndex: 1,
    pageSize: 20,
    loading: false
})
const getList = () => {
    data.loading = true
    setTimeout(() => {
        data.loading = false
        const arr = [];
        for(let i = 0; i < 50; i++) {
            arr.push({
                id: i + 1,
                name: '孙悟空',
                life: 999,
                type: '天产石猴',
                mode: '弼马温',
                die: '善终',
                souler: '黑白无常',
                soultime: '鬼历999年9月9日',
                charger: '阎王',
                chargetime: '鬼厉999年10月1日',
                chargecon: '抓错了，阳寿未尽'
            });
        }
        data.list = arr
    }, 1000)
}
const onSizeChange = (value: number) => {
    data.pageSize = value
    getList()
}
const onCurrentChange = (value: number) => {
    data.pageIndex = value
    getList()
}
</script>

<template>
    <!-- 勾魂管理 -->
    <div class="soul">
        <div class="z-option">
            <div class="option-left">
                <div class="option-item">
                    <el-radio-group v-model="radioValue" size="large"  @change="onTabChange">
                        <el-radio-button :label="1">未勾魂</el-radio-button>
                        <el-radio-button :label="2">勾魂中</el-radio-button>
                        <el-radio-button :label="3">已勾魂</el-radio-button>
                        <el-radio-button :label="4">退单中</el-radio-button>
                        <el-radio-button :label="5">已退单</el-radio-button>
                    </el-radio-group>
                </div>
                <div class="option-item">
                    <el-input v-model="searchKey" size="large" placeholder="输入要搜索的内容" :suffix-icon="Search" />
                </div>
                <div class="option-item">
                    <el-button type="primary" size="large" @click="onSearch">搜索</el-button>
                </div>
            </div>
        </div>
        <div class="z-table">
            <el-table :data="data.list" v-loading="data.loading" :max-height="710" size="large">
                <el-table-column prop="id" label="id" width="80"/>
                <el-table-column prop="name" label="姓名" width="120" />
                <el-table-column prop="life" label="寿命（岁）" width="120" />
                <el-table-column prop="type" label="类别" />
                <el-table-column prop="mode" label="职业" />
                <el-table-column prop="die" label="死亡方式" />
                <el-table-column prop="souler" label="勾魂使者"/>
                <el-table-column prop="soultime" label="勾魂时间" />
                <el-table-column prop="charger" label="退单人" v-if="radioValue === 4 || radioValue === 5" />
                <el-table-column prop="chargetime" label="退单时间" v-if="radioValue === 4 || radioValue === 5" />
                <el-table-column prop="chargecon" label="退单理由" show-overflow-tooltip v-if="radioValue === 4 || radioValue === 5" />
                <el-table-column label="操作" align="center" width="160" fixed="right">
                    <el-button type="primary" link>提醒</el-button>
                    <el-button type="danger" link>删除</el-button>
                </el-table-column>
            </el-table>
        </div>
        <div class="z-pagination">
            <el-pagination background layout="total, prev, pager, next, sizes" :total="100" :page-sizes="[10, 15, 20]" @size-change="onSizeChange" @current-change="onCurrentChange"></el-pagination>
        </div>
    </div>
</template>

<style scoped lang="scss">

</style>